import React from 'react'
import './index.less'
import { Button, Card, Spin, Icon, Alert } from "antd";
import '../ui.less'
export default class Loadings extends React.Component {
    state = {
        loading: false
    }
    handleChange = () => {
        this.setState({
            loading: !this.state.loading
        })
    }
    render() {
        const icon = <Icon type="loading" style={{ fontSize: 24 }} />
        return (
            <div className="home-wrap">
                <Card title="Spin的用法" className="card-warp">
                    <Spin size="small" />
                    <Spin size="large" />


                    <Spin indicator={icon} size="small" spinning={this.state.loading} tip="加载中……" />
                    <Button type="primary" onClick={this.handleChange}>切换</Button>
                </Card>
                <Card title="内容遮罩" className="card-warp">
                    <Alert
                        message="React"
                        description="欢迎使用React"
                        type="info"
                    />
                    <Alert
                        message="React"
                        description="欢迎使用React"
                        type="warning"
                    />
                    <Spin>
                        <Alert
                            message="React"
                            description="欢迎使用React"
                            type="warning"
                        />
                    </Spin>
                </Card>

            </div>
        )
    }
}